﻿@model List<WeChatService.Models.efmodel.CustomMenu>
@{
    ViewBag.Title = "Index";
}

<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed');
            } catch(e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="/welcome">首页</a>
            </li>
            <li class="active">自定义菜单</li>
        </ul><!-- .breadcrumb -->

    </div>
    
    <div class="page-content">
        <div class="page-header">
            <h1>
                自定义菜单
@*                <small>*@
@*                    <i class="icon-double-angle-right"></i>*@
@*                    Static &amp; Dynamic Tables*@
@*                </small>*@
            </h1>
        </div><!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                 <div class="alert alert-block alert-success">
					<button type="button" class="close" data-dismiss="alert">
						<i class="icon-remove"></i>
					</button>
                     注意：<br />根菜单最多只能添加3个，子菜单最多添加5个！<br />
                     请先添加主菜单，再添加子菜单！<br />
                     填写链接地址时请填写以"http://"开头！<br />
                     禁用自定义菜单：禁用后，您的微信公众帐号上的自定义菜单将被删除；如果您想继续在微信公众帐号上使用自定义菜单，请点击“生成自定义菜单”按钮，将重新启用！<br />
                     菜单生成、禁用成功，一般有24小时缓存时间，可以先取消关注 再关注 查看效果！
				</div>

                <div class="row">
                    <div class="col-xs-12">
                        <a title="编辑" class="btn btn-success" href="#modal-add-event" data-toggle="modal">
                            <i class="icon-beaker align-top bigger-110"></i>
							添加菜单
                        </a>
                        <button id="save-custommenu-wechat" class="btn btn-primary">
                            <i class="icon-cloud-upload align-top bigger-110"></i>
                            生成菜单
                        </button>
                        <button id="del-custommenu-wechat" class="btn btn-danger">
                            <i class="icon-cloud-download align-top bigger-110"></i>
                            禁用菜单
                        </button>
                        <br/><br/>
                        <div class="table-responsive">
                            <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th class="center">
                                            <label>
                                                <span class="lbl"></span>
                                            </label>
                                        </th>
                                        <th>标题</th>
                                        <th>关键词</th>
                                        <th>链接地址</th>
                                        <th>父菜单</th>
                                        <th>菜单类型</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @{
                                        if (Model != null && Model.Any())
                                        {
                                            foreach (var item in Model)
                                            {
                                                var rootItem = Model.SingleOrDefault(t => t.ID == item.RootID);
                                                <tr id="data-item-@item.ID">
                                                    <input id="td-hidden-1-@item.ID" type="hidden" value="@item.RootID"/>
                                                    <input id="td-hidden-2-@item.ID" type="hidden" value="@item.Type"/>
                                                    <td id="td-1-@item.ID" class="center">@item.ID</td>
                                                    <td id="td-2-@item.ID">@item.Title</td>
                                                    <td id="td-3-@item.ID">@item.Key</td>
                                                    <td id="td-4-@item.ID">@item.Url</td>
                                                    <td id="td-5-@item.ID">@(item.RootID == 0 ? "无" : (rootItem==null?"未知":rootItem.Title))</td>
                                                    <td id="td-6-@item.ID">@(item.Type.Equals("Click")?"事件":"链接")</td>
                                                    <td>
                                                        <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                                                            <a class="btn btn-xs btn-info" href="#modal-edit-event" data-toggle="modal" onclick="getInfo(@item.ID);">
                                                                <i class="icon-edit bigger-120"></i>编辑
                                                            </a>

                                                            <button class="btn btn-xs btn-danger" onclick="delItem(@item.ID,@item.RootID);">
                                                                <i class="icon-trash bigger-120"></i>删除
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            }
                                        }
                                    }
                                    

                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                    </div><!-- /span -->
                </div><!-- /row -->		
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div><!-- /.main-content -->

<!--要弹出的编辑框-->
<div id="modal-edit-event" class="modal hide" style="display: none;" aria-hidden="true">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">×</button>
        <h3>编辑菜单</h3>
    </div>
    <form id="modal-edit-form" action="/custommenu/edit" method="POST">
    <div class="modal-body">
        <span>编号 &nbsp;&nbsp;</span><input id="edit-id" name="id" class="input-xlarge" type="text" value="" readonly="readonly" />
        <br /><br />
        <span>标题 &nbsp;&nbsp;</span><input id="edit-title" name="title" class="input-xlarge" type="text" maxlength="12"/> 六个字以内
        <br /><br />
        <span>关键词 </span><input id="edit-key" name="key" class="input-xlarge" type="text" value=""/> 点击菜单触发关键字事件
        <br /><br />
        <span>链接 &nbsp;&nbsp;</span><input id="edit-link" name="link" class="input-xlarge" type="text" value=""/> 点击菜单打开的链接
        <br /><br />
        <span>父菜单 </span><select id="edit-root" name="root" class="input-xlarge">
                             @{
                                 if (Model != null && Model.Any())
                                 {
                                     foreach (var item in Model)
                                     {
                                         if (item.RootID > 0) { continue; }
                                        <option id="edit-root-opt-@item.ID" value="@item.ID">@item.Title</option>
                                     }
                                 }
                             }
                             <option id="edit-root-opt-0" value="0">无</option>
                         </select>
        <br /><br />
        <span>类型 &nbsp;&nbsp;</span><select id="edit-type" name="type" class="input-xlarge">
            <option id="edit-type-View" value="View">链接</option>
            <option id="edit-type-Click" value="Click">事件</option>
        </select>
        <br /><br />
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#">取消</a> <a id="edit-event-submit" class="btn btn-primary"
                                                               href="#">确定</a>
    </div>
    </form>
</div>
<!---->
<!--要弹出的添加框-->
<div id="modal-add-event" class="modal hide" style="display: none;" aria-hidden="true">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            ×</button>
        <h3>添加菜单</h3>
    </div>
    <form id="modal-add-form" action="/custommenu/add" method="POST">
    <div class="modal-body">
        <span>标题 &nbsp;&nbsp;</span><input id="add-title" name="title" class="input-xlarge" type="text" maxlength="12"/> 六个字以内
        <br /><br />
        <span>关键词 </span><input id="add-key" name="key" class="input-xlarge" type="text" value=""/> 点击菜单触发关键字事件
        <br /><br />
        <span>链接 &nbsp;&nbsp;</span><input id="add-link" name="link" class="input-xlarge" type="text" value=""/> 点击菜单打开的链接
        <br /><br />
        <span>父菜单 </span><select id="add-root" name="root" class="input-xlarge">
                             @{
                                 if (Model != null && Model.Any())
                                 {
                                     foreach (var item in Model)
                                     {
                                         if (item.RootID > 0) { continue; }
                                        <option value="@item.ID">@item.Title</option>
                                     }
                                 }
                             }
                             <option value="0">无</option>
                         </select>
        <br /><br />
        <span>类型 &nbsp;&nbsp;</span><select id="add-type" name="type" class="input-xlarge">
            <option value="View">链接</option>
            <option value="Click">事件</option>
        </select>
        <br /><br />
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#">取消</a> <a id="add-event-submit" class="btn btn-primary"
                                                               href="#">确定</a>
    </div>
    </form>
</div>
<!---->

<!-- JS -->



<script type="text/javascript">
    jQuery(function ($) {
        $("#menu-custommenu-li").addClass("active");

        $("#save-custommenu-wechat").on(ace.click_event, function () {
            bootbox.confirm("确定要生成菜单到微信吗？", function (result) {
                if (result) {
                    $.ajax({
                        type: "POST", url: "/CustomMenu/CreateMenu",
                        success: function (ajaxresult) {
                            showInfo(ajaxresult.msg, "");
                        }
                    });
                }
            });
        });

        $("#del-custommenu-wechat").on(ace.click_event, function () {
            bootbox.confirm("确定要禁用微信菜单吗？", function (result) {
                if (result) {
                    $.ajax({
                        type: "POST", url: "/CustomMenu/DeleteMenu",
                        success: function (ajaxresult) {
                            showInfo(ajaxresult.msg, "");
                        }
                    });
                }
            });
        });

        $("#modal-add-form").ajaxForm({
            success: function (result) {
                if (result.rel == 1) {
                    showTipAndReload(result.msg, "");
                } else {
                    showError(result.msg, "");
                }
            }
        });

        $("#add-event-submit").on(ace.click_event, function () {
            var title = $("#add-title").val();
            if (title == "") {
                showError("标题不能为空", "");
            } else {
                $("#modal-add-form").submit();
            }
        });

        $("#modal-edit-form").ajaxForm({
            success: function (result) {
                if (result.rel == 1) {
                    showTipAndReload(result.msg, "");
                } else {
                    showError(result.msg, "");
                }
            }
        });

        $("#edit-event-submit").on(ace.click_event, function () {
            var title = $("#edit-title").val();
            if (title == "") {
                showError("标题不能为空", "");
            } else {
                $("#modal-edit-form").submit();
            }
        });
    });

    function getInfo(id) {
        $("#edit-id").val($.trim($("#td-1-"+id).text()));
        $("#edit-title").val($.trim($("#td-2-" + id).text()));
        $("#edit-key").val($.trim($("#td-3-" + id).text()));
        $("#edit-link").val($.trim($("#td-4-" + id).text()));
        var rootv = $.trim($("#td-hidden-1-" + id).val());
        $("#edit-root").val(rootv); 
        var typev = $.trim($("#td-hidden-2-" + id).val());
        $("#edit-type").val(typev);
    }

    function delItem(id, rootid) {
        var msg = "";
        if (rootid == "0") {
            msg = "删除主菜单，其二级菜单也将被删除，确定要删除吗？";
        } else {
            msg = "确定要删除吗？";
        }
        bootbox.confirm(msg, function (result) {
            if (result) {
                $.ajax({
                    type: "POST", url: "/custommenu/del",
                    data: { id:id },
                    success: function (ajaxresult) {
                        if (ajaxresult.rel == 1) {
                            showTipAndReload(ajaxresult.msg, "");
                        } else {
                            showError(ajaxresult.msg, "");
                        }
                    }
                });
            }
        });
    }


    
</script>